<div id="map_canvas" style="width:100%; height:100%"></div>

<script type="text/javascript">
    var cm;
    var map;
    var marker;
    var markers = [];
    var cityCircle;
    var cityCircleExist = new Boolean(false);
    var markerCluster;
    var markerClusterExist = new Boolean(false);
    function initialize() {
        var initpoint =  google.maps.LatLng(10.7723797, 106.658325);

        var myOptions = {
            zoom: 16,
            center: new google.maps.LatLng(10.7723797, 106.658325),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

        var input = document.getElementById('searchTextbox');
        var autocomplete = new google.maps.places.Autocomplete(input);

        autocomplete.bindTo('bounds', map);
        var contentString =
            '<input id="radius" type="text" placeholder="Nhập bán kính (km) cần"/>' +
                '<button  onClick="search(map, cm.getPosition())">Tìm</button>';


        var infowindow = new google.maps.InfoWindow({
            content:contentString
        });

        var place = "{place}";
        var lat = {lat} ;
        var lng = {lng};
        if(lat == null | lng == null){
             lat = 10.772379;
             lng = 106.658325;
        }
        if( place != ""){
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode( { 'address': place}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
//                    map.setCenter(results[0].geometry.location);
                    cm = new google.maps.Marker({
                        map: map,
                        draggable:true,
                        position: results[0].geometry.location,
                        icon:new google.maps.MarkerImage("{__SERVER}/views/images/map/flag-export.png"),
                        title:place
                    });
                    map.setCenter(results[0].geometry.location);
                    infowindow.open(map, cm);
                    google.maps.event.addListener(cm, 'click', function () {
                        infowindow.open(map, cm);
                    });
                } else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });
        }else{
            cm = new google.maps.Marker({
                map:map,
                draggable:true,
                position:new google.maps.LatLng(lat, lng),
                icon:new google.maps.MarkerImage("{__SERVER}/views/images/map/flag-export.png"),
                title:"Trung tâm"
            });
            map.setCenter(cm.getPosition());
            infowindow.open(map, cm);
            google.maps.event.addListener(cm, 'click', function () {
                infowindow.open(map, cm);
            });
        }

        markerCluster = new MarkerClusterer(map);

        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            infowindow.close();
            var place = autocomplete.getPlace();
            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
            } else {
                map.setCenter(place.geometry.location);
                map.setZoom(17);  // Why 17? Because it looks good.
            }

            cm.setPosition(place.geometry.location);
            infowindow.open(map, cm);
        });


    }

    function search(map, c) {
        var r = document.getElementById('radius').value;
        if(isNaN(parseFloat(r))){
            r= 0;
            alert("Vui lòng chỉ nhập số!");
        }
        if (markerClusterExist == true) {
            for (var i = 0; i < markers.length; i++) {
                markers[i].setMap(null);
            }
            markers = [];
            markerCluster.clearMarkers();
            markerClusterExist = false;
            cityCircle.setMap(null);
        }

        $.get(
            "{__SERVER}/map/getplace?c=" + encodeURIComponent(c) + "&d=" + r,
            function (data) {
                var data = jQuery.parseJSON(data);
                $.each(data, function (key, value) {
                    var coor = new google.maps.LatLng(value.lat, value.lng);
                    var icon = new google.maps.MarkerImage("{__SERVER}/views/images/map/condominium.png");
                    var marker = new google.maps.Marker({
                        map:map,
                        position:coor,
                        icon:icon,
                        title:value.rid
                    });
                    var string = "<p>" + "<a href='{__SERVER}/record/detail?rid=" +value.rid+"'>" +value.title+ "</a>" + "</p><p>" + value.address + " ," + value.district + "</p> <p>" + value.price + "</p><p>" + value.description + "</p>";
                    var info = new google.maps.InfoWindow({
                        content:string
                    });
                    google.maps.event.addListener(marker, 'click', function () {
                        info.open(map, marker);
                    });
                    markers.push(marker);


                });
                markerCluster.addMarkers(markers);
                markerClusterExist = true;
//                markerCluster.clearMarkers();

            }
        );

        var populationOptions = {
            strokeColor:"#FF0000",
            strokeOpacity:0.8,
            strokeWeight:2,
            fillColor:"#F00000",
            fillOpacity:0.35,
            map:map,
            center:c,
            radius:r * 1000
        };
        cityCircle = new google.maps.Circle(populationOptions);
        cityCircleExist = true;

        map.fitBounds(cityCircle.getBounds());


    }
    </script>